var app = new Vue({
    el: '#app',
    data() {
        return {
            main: maincolor1,
            li: linum,
            li_p: li_pnum,
            maincolorinput: '#87ceeb',
            color_li_p: [
                [1],
                [1],
                [1],
                [0]
            ],
            show: false,
            color_name: [
                [1],
                [1],
                [1],
                [0]
            ],
            navButton: 'nav-button',
            countColor_name: countColorName,
            mouseoverchangColorstyle: '',
            mouseoutbudingColorstyle: '',
            nav: 'nav',
            scroll: '',
            navcolorimage: 'background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%);',
            // rgb() 0%, rgb() 19%, rgb() 42%, rgb() 79%, rgb() 100%);'
            // background-image: linear-gradient(to right, rgb() 0%, rgb() 100%);
            navColorRgbNum: [
                [253, 219, 145, 1],
                [209, 253, 255, 1],

            ],
            navshow: true,
            mainColorBox: 'main-ch-box',
            mainColorBoxDiv: 'main-color-box-div',
            mainColorBoxDivDiv: 'main-color-box-div-div',
            mainColorBoxDivB1: ['mainColorBoxDivB1', 'mainColorBoxDivB2', 'mainColorBoxDivB2', 'mainColorBoxDivB2'],
            // mainColorBoxDivB2:'mainColorBoxDivB2',
            // mainColorBoxDivB3:'mainColorBoxDivB3',
            // mainColorBoxDivB4:'mainColorBoxDivB4',
            client: [0, 0],
            xuanfupanding: true,
            lizi: [
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
                [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ],
            ]

        }
    },
    mounted() {

    },
    methods: {
        positionBody(event) {
            this.show = false
            this.xuanfupanding = false
            var x, y;
            var e = event || window.event;
            x = e.clientX;
            y = e.clientY;
            // for (let i = 0; i < x*1000; i++) {
            //     this.xuanfupanding = false
            //     this.client[0] += 0.001
            //     this.client[1] += 0.001
            //     this.xuanfupanding = true
            // }

            this.client[0] = x
            this.client[1] = y
            console.log(this.client);
            // this.client[0] = 0
            // this.client[1] = 0
            // console.log(this.client);
            // $(".xuanfu").stop().animate({
            //     top: ''+y+'px',
            //     left: ''+x+'px',
            //     // opacity: '0.5',
            //     height: '100px',
            //     width: '100px'
            // },1000);
            this.xuanfupanding = true
            this.show = true
        },
        clickmainColorBoxDivDivp1() {
            this.show = false
            for (let i = 0; i < 4; i++) {
                if (i === 0) {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB1'
                } else {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB2'
                }
            }
            this.show = true
        },
        clickmainColorBoxDivDivp2() {
            this.show = false
            for (let i = 0; i < 4; i++) {
                if (i === 1) {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB1'
                } else {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB2'
                }
            }
            this.show = true
        },
        clickmainColorBoxDivDivp3() {
            this.show = false
            for (let i = 0; i < 4; i++) {
                if (i === 2) {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB1'
                } else {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB2'
                }
            }
            this.show = true
        },
        clickmainColorBoxDivDivp4() {
            this.show = false
            for (let i = 0; i < 4; i++) {
                if (i === 3) {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB1'
                } else {
                    this.mainColorBoxDivB1[i] = 'mainColorBoxDivB2'
                }
            }
            this.show = true
        },
        // 将navColorRgbNum传进来的数字数字转化为字符串
        navColorRgbNumArrInt_str(arrRgb) {
            return String(arrRgb[0]) + ',' + String(arrRgb[1]) + ',' + String(arrRgb[2]) + ',' + String(arrRgb[3])
        },
        // 窗口监听事事件
        menu() {
            this.navshow = false
            // this.navColorRgbNum=[
            //     [238, 160, 160],
            //     [187, 193, 191],
            //     [87, 198, 225],
            //     [180, 159, 218],
            //     [122, 197, 216]
            // ]
            this.navColorRgbNum = [
                [253, 219, 145, 1],
                [209, 253, 255, 1],
            ]
            this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
            let flag = Math.trunc(this.scroll / 10)
            let a = Math.trunc(this.scroll / 2.2)
            // console.log(Math.trunc(this.scroll / 10));
            for (let i = 0; i < 2; i++) {
                for (let j = 1; j < 2; j++) {
                    this.navColorRgbNum[i][j] -= a
                }
            }
            for (let k = 0; k < 2; k++) {
                this.navColorRgbNum[k][3] -= a / 300
            }
            this.navcolorimage = 'background-image: linear-gradient(to right, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[0]) + ') 0%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[1]) + ') 100%);'
            // this.navcolorimage = 'background-image: linear-gradient(to right, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[0]) + ') 0%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[1]) + ') 19%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[2]) + ') 42%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[3]) + ') 79%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[4]) + ') 100%);'
            // console.log('1111' + flag);
            if (flag >= 88 && flag < 171) {
                this.mainColorBox = 'main-ch-box-dbl'

            } else if (flag <= 88) {
                this.mainColorBox = 'main-ch-box'
            } else if (flag >= 171) {
                this.mainColorBox = 'main-ch-box-dbl2'
            }

            if (flag >= 56) {
                this.navButton = 'nav-button-dbl'
                // $(".nav-button-dbl").stop().fadeIn(500, function () {});
            } else {
                // $(".nav-button-dbl").stop().fadeOut(500, function () {});
                this.navButton = 'nav-button'
            }

            this.navshow = true
        },
        zhuanhuanjinzhi() {
            let a = this.maincolorinput[1] + this.maincolorinput[2]
            let b = this.maincolorinput[3] + this.maincolorinput[4]
            let c = this.maincolorinput[5] + this.maincolorinput[6]
            let d, e, f;
            d = parseInt(a, 16)
            e = parseInt(b, 16)
            f = parseInt(c, 16)
            // console.log(d, e, f);
            return [d, e, f]
        },
        zhuanhuanjinzhi2(arrRgb) {
            var r = [],
                g = [],
                b = []
            let num1 = arrRgb[0].length
            let num2 = arrRgb[1].length
            let num3 = arrRgb[2].length

            for (let i = 0; i < num1; i++) {
                if (arrRgb[0][i].toString(16).length === 1) {
                    r.push('0' + arrRgb[0][i].toString(16))
                } else {
                    r.push(arrRgb[0][i].toString(16))
                }
                if (arrRgb[0].length === 0) {
                    r.push(0)
                }
            }
            for (let i = 0; i < num2; i++) {
                if (arrRgb[1][i].toString(16).length === 1) {
                    g.push('0' + arrRgb[1][i].toString(16))
                } else {
                    g.push(arrRgb[1][i].toString(16))
                }
                if (arrRgb[1].length === 0) {
                    g.push(0)
                }
            }
            for (let i = 0; i < num3; i++) {
                if (arrRgb[2][i].toString(16).length === 1) {
                    b.push('0' + arrRgb[2][i].toString(16))
                } else {
                    b.push(arrRgb[2][i].toString(16))
                }
                if (arrRgb[2].length === 0) {
                    b.push(0)
                }
            }
            // console.log(r, b, g);
            return [r, g, b]
        },
        zhuanhuanjinzhi3(arrRgb, num) {
            var arrColor = []
            for (let i = 0; i < 2; i++) {
                var maxLength = arrRgb[0].length
                if (arrRgb[i].length > arrRgb[i + 1].length) {
                    maxLength = arrRgb[i].length
                } else {
                    maxLength = arrRgb[i + 1].length
                }
            }
            // console.log(arrRgb);
            for (let i = 0; i < num; i++) {
                let r = i,
                    g = i,
                    b = i
                if (arrRgb[0].length <= i) {
                    r = arrRgb[0].length - 1
                }
                if (arrRgb[1].length <= i) {
                    g = arrRgb[1].length - 1
                }
                if (arrRgb[2].length <= i) {
                    b = arrRgb[2].length - 1
                }
                // console.log(r,g,b);
                arrColor.push(arrRgb[0][r] + arrRgb[1][g] + arrRgb[2][b])
            }
            // console.log(arrColor);
            return arrColor


        },
        zhuanhuanjinzhi_jianbian(arrRgb, num) {
            var r = [],
                g = [],
                b = []
            if (arrRgb[0] === 0) {
                r.push(0)
            }
            if (arrRgb[1] === 0) {
                g.push(0)
            }
            if (arrRgb[2] === 0) {
                b.push(0)
            }
            for (let i = 0; i < num; i++) {
                if (arrRgb[0] - 30 > 0) {
                    r.push(arrRgb[0])
                    arrRgb[0] -= 30
                } else {
                    r.push(arrRgb[0])
                }
                if (arrRgb[1] - 30 > 0) {
                    g.push(arrRgb[1])
                    arrRgb[1] -= 30
                } else {
                    g.push(arrRgb[1])
                }
                if (arrRgb[2] - 30 > 0) {
                    b.push(arrRgb[2])
                    arrRgb[2] -= 30
                } else {
                    b.push(arrRgb[2])
                }
            }
            // console.log('ppppppppppp');
            // console.log(r, g, b);
            return [r, g, b]
        },
        // 互补色
        zhuanhuanjinzhi_hubuse(arrRgb, num) {
            var r = [],
                g = [],
                b = []
            r.push(arrRgb[0])
            g.push(arrRgb[1])
            b.push(arrRgb[2])
            r.push(255 - arrRgb[0])
            g.push(255 - arrRgb[1])
            b.push(255 - arrRgb[2])
            // console.log(r,g,b);
            return [r, g, b]
        },
        zhuanhuanjinzhi_duibise(arrRgb, num) {
            var r = [],
                g = [],
                b = []
            if (arrRgb[0] === 0) {
                r.push(0)
            }
            if (arrRgb[1] === 0) {
                g.push(0)
            }
            if (arrRgb[2] === 0) {
                b.push(0)
            }
            for (let i = 0; i < num; i++) {
                if (arrRgb[0] + 30 < 255) {
                    r.push(arrRgb[0])
                    arrRgb[0] += 30
                } else {
                    r.push(arrRgb[0])
                }
                if (arrRgb[1] + 30 < 255) {
                    g.push(arrRgb[1])
                    arrRgb[1] += 30
                } else {
                    g.push(arrRgb[1])
                }
                if (arrRgb[2] + 30 < 255) {
                    b.push(arrRgb[2])
                    arrRgb[2] += 30
                } else {
                    b.push(arrRgb[2])
                }
            }
            // console.log('ppppppppppp');
            // console.log(r, g, b);
            return [r, g, b]
        },
        // 混合色
        zhuanhuanjinzhi_hunhese(arrRgb, num) {
            var r = [],
                g = [],
                b = []
            let flag = 0
            if (arrRgb[0] === 0) {
                r.push(0)
            }
            if (arrRgb[1] === 0) {
                g.push(0)
            }
            if (arrRgb[2] === 0) {
                b.push(0)
            }
            for (let i = 0; i < num; i++) {
                if (arrRgb[0] + 10 < 255) {
                    r.push(arrRgb[0])
                    arrRgb[0] += 10
                } else {
                    r.push(arrRgb[0])
                }
                if (arrRgb[1] / 2 > 0 && flag % 2 === 0) {
                    g.push(Math.trunc(arrRgb[1]))
                    arrRgb[1] /= 2
                    flag++
                } else {
                    g.push(Math.trunc(arrRgb[1]))
                    arrRgb[1] *= 2
                    flag++
                }
                if (arrRgb[2] - 10 > 0) {
                    b.push(arrRgb[2])
                    arrRgb[2] -= 10
                } else {
                    b.push(arrRgb[2])
                }
            }
            // console.log('ppppppppppp');
            console.log(r, g, b);
            return [r, g, b]
        },
        mouseovermainColorBoxDiv() {
            this.show = false
            $(".main-color-box-div-div").stop().slideDown(1000, function () {});
            this.show = true
        },
        mouseoutmainColorBoxDiv() {
            this.show = false
            $(".main-color-box-div-div").stop().slideUp(1000, function () {});
            this.show = true
        },
        mouseoverchangColor() {
            this.mouseoverchangColorstyle = 'nav-button-chang-dbl'
        },
        mouseoutchangColor() {
            this.mouseoverchangColorstyle = ''
        },
        mouseoverchangColor1() {
            this.mouseoutbudingColorstyle = 'nav-button-chang-dbl'
        },
        mouseoutchangColor1() {
            this.mouseoutbudingColorstyle = ''
        },
        changColor() {
            // this.show = false
            // this.main = ''
            // // console.log(this.color_li_p);
            // this.show = true
        },
        budingColor() {
            this.show = false
            this.navshow = false
            this.color_li_p = []
            this.color_name = []
            // 渐变色
            let newColorArr = this.zhuanhuanjinzhi3(this.zhuanhuanjinzhi2(this.zhuanhuanjinzhi_jianbian(this.zhuanhuanjinzhi(), 6)), 6)
            let color_li_p = []
            let color_name = []
            for (let i = 0; i < newColorArr.length; i++) {
                color_li_p.push('background-color:#' + newColorArr[i] + '')
                color_name.push('#' + newColorArr[i] + '')
            }
            (this.color_li_p).push(color_li_p);
            (this.color_name).push(color_name);
            // 互补色
            let newColorArrHubuse = this.zhuanhuanjinzhi3(this.zhuanhuanjinzhi2(this.zhuanhuanjinzhi_hubuse(this.zhuanhuanjinzhi(), 2)), 2)
            let color_li_pHubuse = []
            let color_nameHubuse = []
            for (let i = 0; i < newColorArrHubuse.length; i++) {
                color_li_pHubuse.push('background-color:#' + newColorArrHubuse[i] + '')
                color_nameHubuse.push('#' + newColorArrHubuse[i] + '')
            }
            (this.color_li_p).push(color_li_pHubuse);
            (this.color_name).push(color_nameHubuse);
            console.log(this.color_li_p);
            // 对比色
            let newColorArrDuibise = this.zhuanhuanjinzhi3(this.zhuanhuanjinzhi2(this.zhuanhuanjinzhi_duibise(this.zhuanhuanjinzhi(), 6)), 6)
            let color_li_pDuibise = []
            let color_nameDuibise = []
            for (let i = 0; i < newColorArrDuibise.length; i++) {
                color_li_pDuibise.push('background-color:#' + newColorArrDuibise[i] + '')
                color_nameDuibise.push('#' + newColorArrDuibise[i] + '')
            }
            (this.color_li_p).push(color_li_pDuibise);
            (this.color_name).push(color_nameDuibise);
            console.log(this.color_li_p);
            // 混合色
            let newColorArrHunhese = this.zhuanhuanjinzhi3(this.zhuanhuanjinzhi2(this.zhuanhuanjinzhi_hunhese(this.zhuanhuanjinzhi(), 6)), 6)
            let color_li_pHunhese = []
            let color_nameHunhese = []
            for (let i = 0; i < newColorArrHunhese.length; i++) {
                color_li_pHunhese.push('background-color:#' + newColorArrHunhese[i] + '')
                color_nameHunhese.push('#' + newColorArrHunhese[i] + '')
            }
            (this.color_li_p).push(color_li_pHunhese);
            (this.color_name).push(color_nameHunhese);

            // console.log(this.color_li_p[0]);
            // let b=[]
            // b.push(this.zhuanhuanjinzhi3(this.zhuanhuanjinzhi2(this.zhuanhuanjinzhi_jianbian(this.zhuanhuanjinzhi())), 6))
            // console.log(b);
            // console.log(this.color_li_p);
            // console.log(this.zhuanhuanjinzhi());
            // 点击按钮后 nav 变颜色
            // this.nav = 'nav-dbl'
            // background-image: linear-gradient(to right, #ebc0fd 0%, #d9ded8 100%);
            // background-image: linear-gradient(to right, rgb(253, 219, 145) 0%, rgb(209, 253, 255) 100%);
            // this.navcolorimage='background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);'
            // this.navcolorimage = 'background-image: linear-gradient(to right, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[0]) + ') 0%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[1]) + ') 19%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[2]) + ') 42%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[3]) + ') 79%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[4]) + ') 100%);'
            this.navcolorimage = 'background-image: linear-gradient(45deg, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[0]) + ') 0%, rgb(' + this.navColorRgbNumArrInt_str(this.navColorRgbNum[1]) + ') 100%);'
            // 监听窗口高度
            window.addEventListener('scroll', this.menu)
            window.addEventListener('scroll', app2.menu)
            window.addEventListener('mousemove', this.positionBody)
            this.main = 'color:' + this.maincolorinput + ''
            console.log(this.navColorRgbNumArrInt_str(this.navColorRgbNum[0]));
            app3.bgclow = 12000
            app2.show = true
            this.show = true
            this.navshow = true
        }
    }
})